<template>
  <div>
    <Container>
      <!-- 表格 -->
      <ContainerTitle>选择试玩素材</ContainerTitle>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="素材ID" prop="playable_id"> </el-table-column>
        <el-table-column
          prop="playable_name"
          label="素材名称"
        ></el-table-column>
        <el-table-column
          prop="playable_url"
          label="素材链接"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="playable_orientation"
          label="展示方向"
          show-overflow-tooltip
          :formatter="orientationFormat"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          show-overflow-tooltip
          :formatter="statusFormat"
        >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!--       <el-pagination
        background
        :page-sizes="[50, 100, 500, 1000]"
        :page-size="page.pageSize"
        layout="total, prev, pager, next, sizes"
        :total="pageTotal"
        @size-change="handlePagerSizeChange"
        @current-change="handlePagerCurrentChange"
      /> -->
    </Container>
    <Affix :offset-bottom="0">
      <ButtonGroup isFixed align="right">
        <el-button size="small" @click="$router.back()">返回</el-button>
        <el-button size="small" type="primary" @click="goBack">确定</el-button>
      </ButtonGroup>
    </Affix>
    <!-- 运营方式 -->
    <el-dialog
      title="模版详情"
      :visible.sync="dialogOperateVisible"
      width="542px"
    >
      <el-alert type="" :closable="false" class="u-mb20">
        <div v-html="templateData"></div>
      </el-alert>
      <el-row type="flex" justify="end">
        <el-button
          size="small"
          type="primary"
          @click="dialogOperateVisible = false"
          >确定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import Container from "@/components/container";
import ContainerTitle from "@/components/container-title";
import CustomTableColumn from "@/components/custom-table-column";
import { eventBus } from "@/assets/js/enentBus";
import { exportExcel } from "@/utils/fileDown.js";
import { OPERATOR_OPTION, CUSTOMER_ROLE_OPTION } from "@/assets/js/flow-option";
import { mapOptionLabel } from "@/util";
import Affix from "@/components/affix";
import ButtonGroup from "@/components/button-group";
export default {
  components: {
    Container,
    CustomTableColumn,
    ContainerTitle,
    Affix,
    ButtonGroup,
  },
  data() {
    return {
      OPERATOR_OPTION,
      CUSTOMER_ROLE_OPTION,
      // 模版
      dialogOperateVisible: false,
      searchVal: "", //搜索内容
      type: "", //素材类型
      templateData: "",
      multipleSelection: [],
      tableData: [],
      tableSelectionData: [],
      typeOptions: [
        {
          name: "全部",
          id: 0,
        },
        {
          name: "横竖屏均可",
          id: 1,
        },
        {
          name: "竖屏",
          id: 2,
        },
        {
          name: "横屏",
          id: 3,
        },
      ],
      page: {
        pageNo: 1,
        pageSize: 100,
      },
      pageTotal: 0,
    };
  },
  computed: {
    filterTableColumn() {
      return this.tableColumn.filter((item) => item.visible);
    },
  },
  methods: {
    goBack() {
      eventBus.$emit("playableInfo", this.multipleSelection);
      //调用router回退页面
      this.$router.go(-1);
    },
    checkedTable(rows) {
      rows.forEach((row) => {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      });
    },
    orientationFormat(row, column) {
      if (row.playable_orientation === "PORTRAIT") {
        return "只适配竖屏";
      } else if (row.playable_orientation === "BOTH") {
        return "横竖屏均适配";
      } else if (row.playable_orientation === "VALIDATE_SUCCESS") {
        return "校验通过";
      } else if (row.playable_orientation === "LANDSCAPE") {
        return "只适配横屏";
      }
    },
    statusFormat(row, column) {
      if (row.status === "AUDIT_SUCCESS") {
        return "审核成功";
      } else if (row.status === "VALIDATING") {
        return "校验中";
      } else if (row.status === "VALIDATE_FAIL") {
        return "校验失败";
      } else if (row.status === "VALIDATE_SUCCESS") {
        return "校验通过";
      } else if (row.status === "AUDIT_FAIL") {
        return "审核失败";
      }
    },
    mapOptionLabel,
    exportExcel,
    handleEnsure() {},
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClickCreate() {
      this.$router.push({
        name: "toutiao-currency-detail",
        query: {
          action: "create",
        },
      });
    },
    getPlayableList(accountId) {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt_general/get_playable_list",
        params: {
          accountId: accountId,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          this.tableData = res.data.data.data.list;
          /* this.checkedTable(this.tableData); */
          let playableInfo = this.$route.query.playableInfo;
          if (playableInfo) {
            let ary = [];
            this.tableData.forEach((item) => {
              playableInfo.forEach((items) => {
                if (items.playable_id == item.playable_id) {
                  ary.push(item);
                }
              });
            });
            this.$nextTick(() => {
              this.checkedTable(ary);
            });
          }
          console.log(this.tableData, this.$route.query.playableInfo);
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handleClickLook(data) {
      this.$router.push({
        name: "toutiao-see",
        query: {
          data: data,
        },
      });
      // 获取模版接口
      // console.log(id)
      /* this.dialogOperateVisible = true
      this.$http({
        method: "get",
        url: "/marketing/api/task/getTemplateByTaskId",
        params: {
         taskId: id,
        }
      }).then(res => {
        if (res.data.code === 1) {
          this.templateData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }); */
    },

    // 运营人员
    getCurrentOperate(data = []) {
      let len = data.length;
      if (len) {
        let item = data[len - 1];
        return `${item.operatorBy}`;
      }
      return "-";
    },

    // 列表
    search() {
      this.page.pageNo = 1;
      this.getTable();
    },
    getTable() {
      this.$http({
        method: "get",
        url: "/marketing_tt/api/task_tt/query",
        params: {
          offset: this.page.pageNo,
          limit: this.page.pageSize,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          let data = res.data.data;
          /* this.tableData = data.list; */
          /* this.pageTotal = this.tableData.length; */
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    handlePagerSizeChange(v) {
      this.page.pageSize = v;
      this.getTable();
    },
    handlePagerCurrentChange(v) {
      this.page.pageNo = v;
      this.getTable();
    },
  },
  activated() {
    this.getTable();
  },
  created() {
    /*  let accountId = this.$route.query.accountId;
    this.getPlayableList(accountId); */
  },
  mounted() {
    let accountId = this.$route.query.accountId;
    this.getPlayableList(accountId);
    /* if(this.$route.query.playableInfo){
      this.checkedTable(this.$route.query.playableInfo)
    } */
  },
};
</script>